@font-face {
  font-family: JetBrainsMono;
  src: url('@/assets/fonts/JetBrainsMono-Regular.woff2');
}

pre {
  font-family: JetBrainsMono, Console, '微软雅黑', Courier, monospace !important;

  code,
  span {
    font-family: JetBrainsMono, Console, '微软雅黑', Courier, monospace !important;
  }
}


.arco-typography {
  pre {
    border: 1px solid var(--color-neutral-6);
    backdrop-filter: blur(8px);
    padding: 7px;
    border-radius: 7px;
    overflow: auto;

    code {
      color: var(--td-text-color-primary) !important;
      overflow-x: hidden;
    }
  }

  code {
    margin: 0 !important;
    padding: 0 !important;
    font-size: 1em !important;
    border: none !important;
    background-color: transparent !important;
    color: #c7254e !important;
    border-radius: 2px;
    font-family: JetBrainsMono, Console, '微软雅黑', Courier, monospace !important;

    ol {
      margin: 0;
      padding: 0 20px;
    }
  }
}

.icon {
  fill: var(--td-text-color-primary);
}

.arco-menu-light {
  .arco-menu-item {
    .icon {
      fill: var(--color-text-3);
    }

    &.arco-menu-selected {
      .icon {
        fill: rgb(var(--primary-6));
      }
    }
  }
}

pre code.hljs {
  overflow-x: initial !important;
}


.arco-layout-sider {
  background-color: rgba(255, 255, 255, 0.0) !important;
}

.cherry-detail-body {
  color: var(--td-text-color-secondary);
}

body[arco-theme=dark] {
  .w-e-text-container [data-slate-editor] pre > code {
    text-shadow: 0 1px var(--color-neutral-2);
  }

}


.cherry {
  background-color: var(--td-bg-color-container);

  .cherry-markdown :not(pre) > code {
    background-color: var(--td-bg-color-component) !important;
    color: var(--td-error-color) !important;
    font-family: "JetBrainsMono", "楷体", "宋体", serif;
    padding: 0 4px;
    margin: 0 4px;
  }

  .cherry-flex-toc {
    background-color: var(--td-bg-color-container) !important;
    color: var(--td-text-color-primary) !important;
    box-shadow: var(--td-shadow-3);

    .cherry-toc-one-a {
      color: var(--td-text-color-primary) !important;

      &:hover {
        color: var(--td-brand-color) !important;
      }

      &.current {
        color: var(--td-brand-color-active) !important;
      }
    }
  }

  .cherry-dropdown {
    color: var(--td-text-color-primary) !important;
    background-color: var(--td-bg-color-component) !important;

    .cherry-dropdown-item {
      &:hover {
        background-color: var(--td-bg-color-component-hover) !important;
      }
    }

    .cherry-toolbar-button {
      color: var(--td-text-color-primary) !important;
      background-color: var(--td-bg-color-component-hover) !important;
    }

    .cherry-insert-formula-tab {
      &.active {
        color: var(--td-text-color-placeholder) !important;
        border: 1px solid var(--td-text-color-placeholder) !important;
      }
    }

    .cherry-insert-formula-categary__func {
      color: var(--td-text-color-primary) !important;
      background-color: var(--td-bg-color-component) !important;
    }

    .cherry-insert-formula-categary__func-item {
      color: var(--td-text-color-primary) !important;
      background-color: var(--td-bg-color-component) !important;
    }
  }
  .cherry-toolbar{
    background-color: var(--td-bg-color-container);
  }
  .cherry-editor {
    .CodeMirror {
      background-color: var(--td-bg-color-container);
    }
  }
}

.cherry-markdown.theme__dark table th, .cherry-markdown.theme__dark .cherry-table th {
  background-color: var(--td-bg-color-component) !important;
}

.codex-editor {
  .ce-toolbar__plus, .ce-toolbar__settings-btn {
    &:hover {
      background-color: var(--td-bg-color-component-hover);
    }

    svg {
      color: var(--td-text-color-primary);
    }
  }

  .ce-block.ce-block--selected {
    .ce-block__content {
      background-color: var(--td-bg-color-component);
    }
  }

  .ce-popover__container {
    background-color: var(--td-bg-color-container);

    .cdx-search-field {
      background-color: var(--td-bg-color-component-hover);
    }


    .ce-popover-item {
      &:hover {
        background-color: var(--td-bg-color-component-hover);
      }

      &.ce-popover-item--no-focus {
        &:hover {
          background-color: var(--td-error-color);
          color: var(--td-text-color-anti);
        }
      }

      .ce-popover-item__title {
        color: var(--td-text-color-secondary);
      }

      svg {
        color: var(--td-text-color-secondary);
      }
    }
  }
}

.t-dropdown__submenu ul {
  margin: 0;
}
